<template>
    <div>
        <HomeTop></HomeTop>
        <HomeRight></HomeRight>
        <MyCenterPlugin></MyCenterPlugin>
        <ShoppingCartSearch></ShoppingCartSearch>
        <div class="AddressView-logo">
            <img
                src="https://img.alicdn.com/imgextra/i2/O1CN01bw6IxW1J9dTQPa01x_!!6000000000986-2-tps-148-56.png"></img>
            <h2>我的淘宝</h2>
        </div>
        <div class="Address-title">
            <span><strong>我的收货地址</strong></span>
            <button>添加地址</button>
        </div>
        <div class="Address-form">
            <div class="Address-form-head">
                <span class="formhead-person"><strong>收货人</strong></span>
                <span class="formhead-phone"><strong>电话/手机</strong></span>
                <span class="formhead-area"><strong>所在地区</strong></span>
                <span class="formhead-area-detail"><strong>详细地址</strong></span>
                <span class="formhead-post"><strong>邮编</strong></span>
                <span class="formhead-opeartion"><strong>操作</strong></span>
                <sapn class="formhead-movesetting"><strong>移动设置</strong></sapn>
            </div>
            <div class="Address-form-body" v-for="(item,index) in AdderssData">
                <span class="formbody-person">{{item.name}}</span>
                <span class="formbody-phone">{{item.phone}}</span>
                <span class="formbody-area">{{item.area}}</span>
                <span class="formbody-area-detail">{{item.detail}}</span>
                <span class="formbody-post">{{item.post}}</span>
                <div class="formbody-opeartion">
                    <span class="formbody-opeartion-button">修改</span>
                    <span class="formbody-opeartion-button">删除</span>
                    <!-- <span class="formbody-opeartion-button" v-show="zhiding">置顶</span>
                     <span class="formbody-opeartion-button" v-show="!zhiding">取消置顶</span> -->
                </div>
                <div class="formbody-movesetting">
                    <div class="formbody-movesetting-button"><span  v-show="item.mrAddress">默认地址</span></div>
                    <span  v-show="!item.mrAddress" style="cursor: pointer;" @click="changemrAddress(index)">设为默认</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script> 
import HomeTop from "../components/HomeTop.vue";
import HomeRight from "../components/HomeRight.vue";
import MyCenterPlugin from "@/components/MyCenterPlugin.vue";
import ShoppingCartSearch from "@/components/ShoppingCartSearch.vue";
import "../style/AddressView.css";
export default {
  name: "AddressView",
  data() {
    return {
        AdderssData: [
            {
                name: "张三",
                phone: "12345678901",
                area: "北京",
                detail: "北京",
                post: "100000",
                mrAddress: true
            },
            {
                name: "李四",
                phone: "123456878779",
                area: "承德",
                detail: "承德",
                post: "110000",
                mrAddress: false
            }
        ],
        // zhiding: true,
    }
  },
  methods: {
    changemrAddress(index){
        this.AdderssData.forEach(item => {
            item.mrAddress = false;
        });
        this.AdderssData[index].mrAddress = true;
        
    }
  },
}
</script>